<template>
    <div>user</div>

    <div>{{ dataList }}</div>
    <el-button plain @click="countryBtn">country info</el-button>
    <el-button plain @click="openEdit">open edit</el-button>

    <el-dialog v-model="dialogVisible" :modal="true" :onClose="onClose">
        <router-view></router-view>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import { PROJECT_KEY } from '@/config';
import { ref } from "vue";
import type { ApiRequest, LoginInfoReq, CountryList  } from "@glz/apis";
import { country } from "@glz/apis";
import { useTokenStore } from '@glz/utils';
import router from '@/router';

const tokenInfo = useTokenStore(PROJECT_KEY)
const dataList = ref({})

const countryBtn = async () => {

    const countryInfo :CountryList = {
        field_name:'',
        context:'',
        pageIndex:1,
        pageSize:20,
        lastId:'',
        id:'',
        company_id:"1755649432567877",
        staff_id:'',
        navbar_id:''
   }

   const req : ApiRequest<CountryList> = {
            device:1,
            lang:"zh-tw",
            oData:countryInfo
           }


   country.setToken(tokenInfo.token)

   const resp = await country.dataLists(req);

   dataList.value = resp

   console.log("resp",resp)

}

const dialogVisible = ref(false)

const openEdit = () => {
    dialogVisible.value = true
    router.push({ path: "/user/User_edit" });
    console.log('user_edit')
}

/**
 * 關閉彈窗返回list
 */
 const onClose = () => {
    router.push({ path: "/user" })
}
</script>